"use strict";
var cdata = {
    config: {
        x: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
        y: [50, 100, 150, 200, 250, 300, 350, 400]
    },
    data: [153, 265, 143, 112, 288, 312, 245],
    offset: { x: 0, y: 0, scaleY: 1 },
};
var Zhexiantu = (function () {
    function Zhexiantu(mycavSlt, data) {
        this.padding = 80;
        this.data = data;
        var canvas = document.querySelector(mycavSlt);
        this.ctx = canvas.getContext("2d");
        this.wh = {
            w: canvas.clientWidth - this.padding,
            h: canvas.clientHeight - this.padding,
        };
        this.ctx.translate(this.padding, this.wh.h);
        this.ctx.save();
    }
    Zhexiantu.prototype.create = function () {
        this.setLayout();
        this.setPoint();
        this.setChartInfo();
    };
    Zhexiantu.prototype.setLayout = function () {
        var ctx = this.ctx;
        var config = this.data.config;
        var wh = { w: this.wh.w - this.padding, h: this.wh.h - this.padding };
        ctx.save();
        ctx.fillStyle = "#ffff0030";
        ctx.strokeStyle = "#555";
        ctx.lineWidth = 2;
        ctx.rect(0, 0, wh.w, -wh.h);
        ctx.stroke();
        ctx.fill();
        ctx.restore();
        this.data.offset.x = (wh.w - 50) / config.x.length;
        this.data.offset.y = (wh.h - 50) / config.y.length;
        this.data.offset.scaleY = config.y[0] / this.data.offset.y;
        ctx.save();
        ctx.font = "20px 黑体 ";
        ctx.textAlign = "center";
        ctx.beginPath();
        for (var i = 0; i < config.x.length; i++) {
            var x = (i + 1) * this.data.offset.x;
            ctx.moveTo(x, 0);
            ctx.lineTo(x, -10);
            ctx.fillText(config.x[i], x, 25);
        }
        ctx.stroke();
        ctx.closePath();
        ctx.beginPath();
        ctx.lineWidth = .5;
        ctx.strokeStyle = "#AAA";
        for (var i = 0; i < config.y.length; i++) {
            var y = (i + 1) * this.data.offset.y;
            ctx.moveTo(0, -y);
            ctx.lineTo(wh.w, -y);
            ctx.fillText(String(config.y[i]), -25, -y);
        }
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
    };
    Zhexiantu.prototype.setPoint = function () {
        var ctx = this.ctx;
        var offset = this.data.offset;
        ctx.save();
        ctx.font = "16px 黑体";
        ctx.textAlign = "center";
        var i = 1;
        for (var _i = 0, _a = this.data.data; _i < _a.length; _i++) {
            var v = _a[_i];
            ctx.beginPath();
            ctx.arc(i * offset.x, -v / offset.scaleY, 5, 0, 2 * Math.PI);
            ctx.fillStyle = "blue";
            ctx.fill();
            ctx.fillText(String(v), i * offset.x, -v / offset.scaleY - 20);
            i++;
        }
        i = 1;
        ctx.beginPath();
        for (var _b = 0, _c = this.data.data; _b < _c.length; _b++) {
            var v = _c[_b];
            ctx.lineTo(i * offset.x, -v / offset.scaleY);
            i++;
        }
        ctx.stroke();
        ctx.restore();
    };
    Zhexiantu.prototype.setChartInfo = function (title) {
        if (title === void 0) { title = 'Canvas折线图案例展示'; }
        var ctx = this.ctx;
        var base = { w: this.wh.w - this.padding, h: this.wh.h };
        ctx.save();
        ctx.textAlign = "center";
        ctx.font = "20px 黑体";
        ctx.fillText(title, base.w / 2, -base.h + 40);
        ctx.restore();
    };
    return Zhexiantu;
}());
(new Zhexiantu('#mycav', cdata)).create();
